<template>
    <div class="formula_warp">
         <Modal
        v-model="isOpenSettingPanel"
        title="设置模板"
        ok-text="应用"
        v-on:on-ok="onOk"
        cancel-text="取消">
         <div class="formula_warp">
          <Alert show-icon>
              <Icon type="ios-bulb-outline" slot="icon"></Icon>
              点击下面按钮随意组织计算公式
          </Alert>
          <ButtonGroup>
              <Button @click="formulaButClick('USE')"  title="起步价">起</Button>
              <Button @click="formulaButClick('DELIVERY')" title="配送点">配</Button>
              <Button @click="formulaButClick('EXCEED')" title="超出里程价">超</Button>
              <Button @click="formulaButClick('DISCOUNTS')" title="优惠价">优</Button>
              <Button @click="formulaButClick('NUMBER')" title="数字输入框">1</Button>
              <Button @click="formulaButClick('ADD')" title="加">+</Button>
              <Button @click="formulaButClick('SUB')" title="减">-</Button>
              <Button @click="formulaButClick('MUL')" title="乘">x</Button>
              <Button @click="formulaButClick('DIV')" title="除">/</Button>
              <Button @click="formulaButClick('LEFT')" title="(">(</Button>
              <Button @click="formulaButClick('RIGHT')" title=")">)</Button>
              <Button @click="formulaButClick('del')" title="清除前一个" icon="ios-backspace-outline" />
          </ButtonGroup> 
          <div class="formula_content">
              <template v-for="item in formulas">
                  <span v-if="item.type=='NUMBER'" v-bind:key="item.index">{{item.value}}</span>
                  <span v-if="item.type=='ADD'" v-bind:key="item.index">+</span>
                  <span v-if="item.type=='SUB'" v-bind:key="item.index">-</span>
                  <span v-if="item.type=='MUL'" v-bind:key="item.index">*</span>
                  <span v-if="item.type=='DIV'" v-bind:key="item.index">/</span>
                  <span v-if="item.type=='LEFT'" v-bind:key="item.index">(</span>
                  <span v-if="item.type=='EXCEED'" v-bind:key="item.index">超出里程价</span>
                  <span v-if="item.type=='RIGHT'" v-bind:key="item.index">)</span>
                  <span v-if="item.type=='USE'" v-bind:key="item.index">起步价</span>
                  <span v-if="item.type=='DELIVERY'" v-bind:key="item.index">配送点</span>
                  <span v-if="item.type=='DISCOUNTS'" v-bind:key="item.index">优惠价</span>
              </template>  
          </div>
        </div>
    </Modal>
     <Modal
        v-model="setNumberModel"
        title="请输入数字"
        ok-text="完成"
        width="200px"
        v-on:on-ok="onSetNumberOk"
        cancel-text="取消">
          <InputNumber  :min="1" :step="1" v-model="numberValue"></InputNumber>
    </Modal>    
    </div>
</template>
<script>
export default {
    name:'formula',
    data(){
        return {
            setNumberModel:false,
            numberValue:1,
            formulas:[],
            callback:null,//外部传递的参数,会原样返回
            isOpenSettingPanel:false,
            
        }
    },
    methods:{
        onOk(){
             if(this.callback){
                 this.callback(this.getFormatFormula())
             }
        },
        show(formula,callback){
            
            this.callback=callback;
            this.formulas=[];
            this.formatFormula(formula);
            this.isOpenSettingPanel=true;
        },
        getFormatFormula(){
             let then=this;
             let formulatext="";
             this.formulas.forEach(v=>{
                formulatext+=then.revertFormat(v);
             }) 
             return formulatext;  
        },
        revertFormat(format){
             if(format.type==="NUMBER"){
                 return format.value+" ";
             }
             switch(format.type){
                case 'ADD':
                    return "+ ";
                case 'SUB':
                    return "- ";
                case 'MUL':
                    return "* ";
                case 'DIV':
                    return "/ ";
                break;
                case 'LEFT':
                    return "( ";
                case 'RIGHT':
                    return ") ";
                case 'RIGHT':
                    return ") ";
                default:
                    return format.type+" ";
            }
        },
        /**
         * 格式化表棕式
         */
        formatFormula(formula){
           
            let ss=formula.split(" ");
            for(var i=0; i<ss.length;i++){
                this.addFormula(ss[i]);
            }
        },
        addFormula(v){
             debugger;
            if(!isNaN(parseInt(v))){
                 this.formulas.push({type:'NUMBER',value:v})
                return;
            }
            switch(v){
                case '+':
                this.formulas.push({type:'ADD'})
                break;
                case '-':
                this.formulas.push({type:'SUB'})
                break;
                case '*':
                this.formulas.push({type:'MUL'})
                break;
                case '/':
                this.formulas.push({type:'DIV'})
                break;
                case '(':
                this.formulas.push({type:'LEFT'})
                break;
                case ')':
                this.formulas.push({type:'RIGHT'})
                break;
                default:
                this.formulas.push({type:v})
                break;
            }
        },
        onSetNumberOk(){
            this.formulas.push({
                type:'NUMBER',
                value:this.numberValue
            })
            },
        formulaButClick(type){
            switch(type){
                case 'NUMBER':
                    this.setNumberModel=true;
                break;
                case 'del':
                    this.formulas.pop();
                    break;
                default:
                    this.formulas.push({type:type});
                break  
            }
        },
    },
    watch:{
        value (value){
            
        }
    }
}
</script>
<style lang="less" scoped>
    .formula_warp{
        .tips{

        }
    }
</style>
